<template>
    <div class="menu-tab">
        <el-tabs
            class="tabs"
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
            @tab-click="tabClick($event)"
        >
            <el-tab-pane
                :key="item.name"
                v-for="item in editableTabs"
                :label="item.title"
                :name="item.name"
            ></el-tab-pane>
        </el-tabs>
        <router-view style="flex: 1" />
        <!-- 放入router-view -->
    </div>
</template>

<script>
export default {
    name: 'Tab',
    computed: {
        // 获取点击菜单的数组
        editableTabs: {
            get() {
                return this.$store.state.tabsPage;
            },
            // 当关闭某个tab后，修改store的值
            set(val) {
                this.$store.state.tabsPage = val;
            }
        },
        editableTabsValue: {
            get() {
                return this.$store.state.TabsValue;
            },
            set(val) {
                this.$store.state.TabsValue = val;
            }
        }
    },
    watch: {
        // $route: {
        //   handler(newVal) {
        //     console.log('newVal', newVal)
        //     // 用户刷新后，如果已经打开多个tab，刷新后，只能保留当前一个
        //     let item = {
        //       name: newVal.meta.title,
        //       routeName: newVal.name,
        //       title: newVal.meta.title,
        //     }
        //     this.$nextTick(() => {
        //       this.$store.state.tabsPage = item
        //       this.$store.state.TabsValue = newVal.name
        //     })
        //   },
        //   deep: true,
        // },
    },
    methods: {
        // 当前激活的tab与关闭的tab是同一个时
        removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        // 当用户关闭第一个的时候，取index+1, 当关闭最后一个时，取index-1
                        // 但是当只剩下最后一个tab时，此时关闭，什么都不显示
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        console.log(nextTab);
                        if (nextTab) {
                            activeName = nextTab.name;
                            this.editableTabsValue = activeName;
                            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                            this.$router.push({ name: activeName });
                        } else {
                            this.editableTabsValue = '';
                            this.editableTabs = [];
                            this.$router.push({ path: '/home' });
                        }
                    }
                });
            }
        },
        tabClick(event) {
            //写一个点击tabs跳转
            this.$router.push({ name: event.name });
        }
    }
};
</script>

<style scoped lang="less">
/deep/ .el-tabs__header {
    margin: 0;
}
/deep/ .el-tabs--top {
    box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
    height: 41px;
}
.menu-tab {
    width: 100%;
    height: 100%;
    border: 1px solid #f5f5f5;
    box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
    display: flex;
    flex-direction: column;
}
</style>
